<%@ page import="com.lagou.task.service.StudentService" %>
<%@ page import="com.lagou.task.entity.Student" %>
<%@ page import="java.util.List" %>

<%--
  Created by IntelliJ IDEA.
  User: liuyunkai
  Date: 2021/1/9
  Time: 6:55 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>班级管理</title>
    <%--导入bootstrap样式--%>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
</head>
<body style="padding: 100px">
<div class="container-fluid">
    <c:import url="_header.jsp"/>
    <!--定义一个内联的div块-->
    <div class="form-inline">
        <!--定义按钮-->
        <div class="form-inline">
            <button type="button" class="btn btn-info" id="btn-add">新增</button>
            <button type="button" class="btn btn-info" id="btn-delete">删除</button>
            <button type="button" class="btn btn-info" id="btn-modify">编辑</button>
        </div>
        <div class="form-inline" style="position:relative; left: 190px; bottom: 33px">
            <form class="form-horizontal" action="classFind">
                <div class="form-group">
                    <button type="submit" class="btn btn-info" id="btn-select">查询</button>
                </div>
                <!--定义搜索框-->
                <div class="form-group" style="position: relative; left: 40px">
                    <input type="text" class="form-control" placeholder="按班级名称查询" id="selectByName" name="selectByName">
                </div>
            </form>
        </div>

        <%--添加成功提示--%>
        <c:set var="addSuccess" value="${addSuccess}"/>
        <c:if test="${addSuccess != null}">
            <div class="alert alert-success" id="addSuccess">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>添加成功！</strong>
            </div>
        </c:if>
        <%--添加错误提示--%>
        <c:set var="addError" value="${addError}"/>
        <c:if test="${addError != null}">
            <div class="alert alert-danger" id="addError">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>添加班级有误！班级名称重复！</strong>
            </div>
        </c:if>

        <%--修改成功提示--%>
        <c:set var="modifySuccess" value="${modifySuccess}"/>
        <c:if test="${modifySuccess != null}">
            <div class="alert alert-success" id="modifySuccess">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>修改成功！</strong>
            </div>
        </c:if>
        <%--修改错误提示--%>
        <c:set var="modifyError" value="${modifyError}"/>
        <c:if test="${modifyError != null}">
            <div class="alert alert-danger" id="modifyError">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>输入有误！修改失败！</strong>
            </div>
        </c:if>
        <%--查找失败提示--%>
        <c:set var="findError" value="${findError}"/>
        <c:if test="${findError != null}">
            <div class="alert alert-danger" id="findError">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>暂无该班级！</strong>
            </div>
        </c:if>
        <c:set var="findNull" value="${findNull}"/>
        <c:if test="${findNull != null}">
            <div class="alert alert-danger" id="findNull">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>请输入正确班级名称！</strong>
            </div>
        </c:if>

        <!--定义表格-->
        <div class="table-responsive">
            <c:set var="classes" scope="request" value="${requestScope.classes}"/>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th></th>
                    <th>班级</th>
                    <th>年级</th>
                    <th>班主任名称</th>
                    <th>班级口号</th>
                    <th>班级人数</th>
                </tr>
                </thead>
                <tbody id="classTbody">
                <!-- 显示学生信息 -->
                <c:forEach var="c" items="${classes}">
                    <tr class="default-color0">
                        <td><input type="checkbox"></td>
                        <td>${c.name}</td>
                        <td>${c.grade}</td>
                        <td>${c.teacher}</td>
                        <td>${c.slogan}</td>
                        <td>${c.numer}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <%--增加班级--%>
    <c:import url="classAdd.jsp"/>
    <%--删除班级--%>
    <c:import url="classDelete.jsp"/>
    <%--编辑班级--%>
    <c:import url="classModify.jsp"/>

    <%--导入js插件--%>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        /* 设置提示提示存活时间 */
        $("#addError").delay(2000).fadeOut();
        $("#addSuccess").delay(2000).fadeOut();
        $("#modifyError").delay(2000).fadeOut();
        $("#modifySuccess").delay(2000).fadeOut();
        $("#findError").delay(2000).fadeOut();
        $("#findNull").delay(2000).fadeOut();

        /* 添加班级 */
        $("#btn-add").click(function () {
            $("#addModal").modal("toggle");
            // 设置提交按钮
            $("#add").attr("disabled", "disabled");

            // 班级名称验证
            var regClassName = /^[0-9]{3}$/;
            $("[name='className']").focus(function () {
                var className_focus = $("[name='className']").val();
                if (!regClassName.test(className_focus)) {
                    $("[name='className']").parent().addClass("has-error");
                }
            });
            $("[name='className']").blur(function () {
                var className_blur = $("[name='className']").val();
                if (regClassName.test(className_blur)) {
                    $("[name='className']").parent().removeClass("has-error");
                    $("[name='className']").parent().addClass("has-success");
                }
            });

            // 年级验证
            var regGrade = /^[\u4e00-\u9fa5]{3,10}$/;
            $("[name='grade']").focus(function () {
                var grade_focus = $("[name='grade']").val();
                if (!regGrade.test(grade_focus)) {
                    $("[name='grade']").parent().addClass("has-error");
                }
            });
            $("[name='grade']").blur(function () {
                var grade_blur = $("[name='grade']").val();
                if (regGrade.test(grade_blur)) {
                    $("[name='grade']").parent().removeClass("has-error");
                    $("[name='grade']").parent().addClass("has-success");
                }
            });

            // 班主任名称验证
            var regTeacher = /^[\u4e00-\u9fa5]{1,10}$/;
            $("[name='teacher']").focus(function () {
                var teacher_focus = $("[name='teacher']").val();
                if (!regTeacher.test(teacher_focus)) {
                    $("[name='teacher']").parent().addClass("has-error");
                }
            });
            $("[name='teacher']").blur(function () {
                var teacher_blur = $("[name='teacher']").val();
                if (regTeacher.test(teacher_blur)) {
                    $("[name='teacher']").parent().removeClass("has-error");
                    $("[name='teacher']").parent().addClass("has-success");

                }
            });

            // 班级人数验证
            var regNumber = /^\d{1,2}$/;
            $("[name='number']").focus(function () {
                var number_focus = $("[name='number']").val();
                if (!regNumber.test(number_focus)) {
                    $("[name='number']").parent().addClass("has-error");
                }
            });
            $("[name='number']").blur(function () {
                var number_blur = $("[name='number']").val();
                if (regNumber.test(number_blur)) {
                    $("[name='number']").parent().removeClass("has-error");
                    $("[name='number']").parent().addClass("has-success");

                    // 激活提交按钮
                    if (!$("#addForm").find("input").hasClass("has-error")) {
                        $("#add").removeAttr("disabled");
                    }
                }
            });
            // 清空模态框
            $("#addForm")[0].reset();
        });

        /* 删除班级 */
        $("#btn-delete").click(function () {
            /* 获得选中节点的个数 */
            var count = $("input[type='checkbox']:checked").length;
            // 先清空数据
            $("#deleteClassTbody").empty();
            var text = "";
            var temId = "";
            /* 若有选中，则进入模态框 */
            if (count > 0) {
                /* 遍历找到选中的复选框 */
                $("input[type='checkbox']:checked").each(function () {
                    var class_numer = $(this).parent().next().next().next().next().next().text();
                    if (class_numer == 0) {
                        $("#deleteModal").modal("toggle");
                        /* 找到对应复选框的行并删除该节点 */
                        text += "<tr class='default-color0'>" + $(this).parent().parent().html() + "</tr>";
                        // 获得班级名称并设置name
                        temId += $(this).parent().next().text() + " ";
                    } else {
                        alert("当前选中班级学生个数不为0，无法删除！");
                    }
                });
                // 将要删除班级的id放到input的value中
                $("#deleteName").attr("value", temId);
                //var deleteId = $("#deleteID").val();

                $("#deleteClassTbody").append(text);
                $("#delete").click(function () {
                    /* 隐藏模态框 */
                    $("#deleteModal").modal("hide");
                });
            } else {
                alert("请选择要删除的班级信息！");
            }
        });

        /* 修改班级 */
        $("#btn-modify").click(function () {
            /* 获得选中节点的个数 */
            var count = $("input[type='checkbox']:checked").length;
            var temId = ""
            /* 若有选中，则进入模态框 */
            if (count == 1) {
                $("#modifyModal").modal("toggle");
                /* 遍历找到选中的复选框 */
                $("input[type='checkbox']:checked").each(function () {
                    // 获得学号并设置name
                    temId = $(this).parent().next().text();
                    var modifyGrade = $(this).parent().next().next().text();
                    var modifyTeacher = $(this).parent().next().next().next().text();
                    var modifySlogan = $(this).parent().next().next().next().next().text();
                    var modifyNumber = $(this).parent().next().next().next().next().next().text();

                    // 将选择班级信息显示
                    $("[name='modifyClassName']").attr("value", temId);
                    $("[name='modifyGrade']").attr("value", modifyGrade);
                    $("[name='modifyTeacher']").attr("value", modifyTeacher);
                    $("[name='modifySlogan']").attr("value", modifySlogan);
                    $("[name='modifyNumber']").attr("value", modifyNumber);
                });
                // 将要编辑班级的name放到input的value中
                $("#modifyHiddenClassName").attr("value", temId);

            } else if (count > 1) {
                alert("每次只能编辑一条信息！");
            } else {
                alert("请选择要编辑的班级！");
            }
        });
    </script>
</body>
</html>